<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="app">
    <!-- <h1>会话大模型前端界面</h1> -->
    <div class="modeldialog-home">
      <div class="modeldialog-1">
        <MessageList :messages="messages" />
      </div>
      <div class="modeldialog-2">
        <div class="newdialog" @click="newdialog">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-deepseek"></use>
          </svg>
          <div>开启新对话</div>
        </div>
      </div>
      <div class="modeldialog-3">
        <MessageInput @send-message="handleSendMessage" />
      </div>
    </div>
  </div>
</template>

<script>
import MessageList from "@/components/MessageList.vue";
import MessageInput from "@/components/MessageInput.vue";
// import axios from "axios";
import { postHttpEse } from "@/api/configHttpBigModel";
export default {
  components: {
    MessageList,
    MessageInput,
  },
  data() {
    return {
      messages: [],
      inputText: this.$route.params.baseData.trim(),
      loginTF: localStorage.getItem("token") ? true : false,
    };
  },
  mounted() {
    console.log(this.inputText, "inputText");
  },
  watch: {
    inputText: {
      immediate: true,
      deep: true,
      handler: function (val) {
        if (val && this.loginTF) {
          // localStorage.setItem("user", JSON.stringify(this.form));
          this.handleSendMessage(this.inputText);
        } else {
          this.$router.push({
            name: "login",
            params: {
              baseData: this.inputText,
            },
          });
        }
      },
    },
  },
  methods: {
    // async handleSendMessage(message) {
    //   // 添加用户消息到消息列表
    //   this.messages.push({ sender: "user", content: message });
    //   try {
    //     // 发送请求到后端获取大模型的回复
    //     const response = await axios.post("YOUR_API_ENDPOINT", { message });
    //     const botResponse = response.data.message;
    //     // 添加机器人回复到消息列表
    //     this.messages.push({ sender: "bot", content: botResponse });
    //   } catch (error) {
    //     console.error("请求出错:", error);
    //     this.messages.push({ sender: "bot", content: "请求出错:" });
    //   }
    // },
    handleSendMessage(message) {
      // 添加用户消息到消息列表
      this.messages.push({ sender: "user", content: message });
      console.log(message, "message");
      let pamars = {
        conversation_id: "",
        conversation_conf: {},
        stream: false,
        debug: true,
        source: "API",
        question: message,
        asserts: [],
      };
      let project_id = "project_id";
      let assistant_id = "assistant_id";
      postHttpEse(project_id, assistant_id, pamars)
        .then((res) => {
          const botResponse = res.answer;
          // 添加机器人回复到消息列表
          this.messages.push({ sender: "bot", content: botResponse });
        })
        .catch(() => {
          this.messages.push({
            sender: "bot",
            content: "请求出错:没有具体用户信息以及token",
          });
        });
    },
    newdialog() {
      this.$router.push({
        path: "/bigModel",
        // query: {
        //   baseData: this.inputText,
        // },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.modeldialog-home {
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  display: flex;
  position: relative;
  .modeldialog-1 {
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
    flex-grow: 1;
    margin: auto;
    padding: 38px 0 40px;
  }
  .modeldialog-2 {
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    display: flex;
  }
  .modeldialog-2 {
    z-index: 1;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    .newdialog {
      background: rgb(219 234 254);
      color: #4d6bfe;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border-radius: 12px;
      padding: 2px 14px;
    }
    .newdialog:hover {
      background-color: #bae7ff; /* 鼠标悬停时的背景颜色 */
      //  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
    }
  }
}

.icon {
  width: 2em;
  height: 2em;
  fill: currentColor;
  overflow: hidden;
}
</style>